@import "../../assets/scss/core/base";

$range-time-prefix-cls: #{$jigsaw-prefix}-range-time;

.#{$range-time-prefix-cls}-host {
    @include inline-block();
    padding: 5px;
    position: relative;
    width : 516px;
    border: 1px solid $border-color-base ;
    border-radius: $border-radius-base;
    background: $component-background;
    &.#{$range-time-prefix-cls}-error {
        border-color: $error-color;
    }
    jigsaw-time{
        border: none;
    }
    .#{$range-time-prefix-cls}-endTime,.#{$range-time-prefix-cls}-startTime{
        .jigsaw-time-box{
            padding-top:26px;
        }
    }

    .#{$range-time-prefix-cls}-shortcuts{
        position:absolute;
        left:260px;
        display : flex;
        justify-content : center;
        width:240px;
        top : 10px;
        &>span {
            font-size: 12px;
            display: inline-block;
            height: 26px;
            line-height: 26px;
            padding: 0 10px;
            border: 1px solid $primary-color;
            border-right: 0;
            color: $primary-color;
            cursor: pointer;
            &:first-child {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            &:last-child {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                border-right: 1px solid $primary-color;
            }
            &.active {
                background-color: $primary-color;
                color: #fff;
            }
        }
    }
}

